<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>

<script>
// 导入 ECharts
import * as echarts from "echarts";
import {onMounted, onUnmounted, reactive, ref, watch} from "vue";

export default {
  name: "BarGraph",
  props: {
    width: {
      type: String,
      required: true
    },
    height: {
      type: String,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    selectedYear: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const currentYear = ref(props.selectedYear);

    // 定义响应式对象用于存储图表数据
    const chartData = reactive({
      xAxisData: [],
      seriesData: []
    });

    // 监听选中的年份变化，更新图表数据
    watch(() => props.selectedYear, value => {
      updateChartData(value);
    });

    let myEcharts = echarts;

    // 挂载时初始化图表
    onMounted(() => {
      initChart();
    });

    // 卸载时销毁图表
    onUnmounted(() => {
      // 销毁图表
      myEcharts.dispose;
    });

    function initChart() {
      // 基于准备好的dom，初始化echarts实例
      let chart = myEcharts.init(
          document.getElementById("myEcharts"),
          "purple-passion"
      );

      chart.setOption({
        // 设置图表的标题
        title: {
          // 设置标题文本
          text: `${currentYear.value}年各月份销售量（单位：件）`,
          // title 组件离容器左侧的距离
          left: "center"
        },
        // 设置图表的 X 轴
        xAxis: {
          // 数据类型为离散的类目数据
          type: "category",
          // 设置 X 轴数据
          data: chartData.xAxisData
        },
        // 设置提示框组件
        tooltip: {
          // 设置提示框的触发条件
          trigger: "axis"
        },
        // 设置图表的 Y 轴
        yAxis: {
          // 数据类型为连续的数值数据
          type: "value"
        },
        // 设置图表的图例
        series: [
          {
            // 图例中要展示的数据
            data: chartData.seriesData,
            // 设置图表的类型为折线图
            type: "line",
            // 平滑曲线
            smooth: true,
            // 在顶部显示数据
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      // 大小自适应窗口大小变化
      window.onresize = function () {
        // 重置容器高宽
        chart.resize();
      };
    }

    // 更新图表数据
    function updateChartData(selectedYear) {
      currentYear.value = selectedYear;
      const selectedData = props.tableData.find(
          item => item.year === selectedYear
      );
      if (selectedData) {
        chartData.xAxisData = [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月"
        ];
        chartData.seriesData = selectedData.mouths
        // 更新标题
        myEcharts.getInstanceByDom(document.getElementById("myEcharts")).setOption({
          title: {
            text: `${currentYear.value}年各月份销售量（单位：件）`
          },
          xAxis: {
            data: chartData.xAxisData
          },
          series: [
            {
              data: chartData.seriesData
            }
          ]
        })
      }
    }

    return {
      initChart,
      chartData
    };
  }
  // setup(props) {
  //   let myEcharts = echarts;
  //
  //   // 挂载时初始化图表
  //   onMounted(() => {
  //     initChart();
  //   });
  //
  //   // 卸载时销毁图表
  //   onUnmounted(() => {
  //     // 销毁图表
  //     myEcharts.dispose;
  //   });
  //
  //   function initChart() {
  //     // 基于准备好的dom，初始化echarts实例
  //     let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
  //     chart.setOption({
  //       // 设置图表的标题
  //       title: {
  //         // 设置标题文本
  //         text: "2021年各月份销售量（单位：件）",
  //         // title 组件离容器左侧的距离
  //         left: "center",
  //       },
  //       // 设置图表的 X 轴
  //       xAxis: {
  //         // 数据类型为离散的类目数据
  //         type: "category",
  //         // 设置 X 轴数据
  //         data: [
  //           "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
  //         ]
  //       },
  //       // 设置提示框组件
  //       tooltip: {
  //         // 设置提示框的触发条件
  //         trigger: "axis"
  //       },
  //       // 设置图表的 Y 轴
  //       yAxis: {
  //         // 数据类型为连续的数值数据
  //         type: "value"
  //       },
  //       // 设置图表的图例
  //       series: [
  //         {
  //           // 图例中要展示的数据
  //           data: [
  //             606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
  //           ],
  //           // 设置图表的类型为折线图
  //           type: "line",
  //           // 平滑曲线
  //           smooth: true,
  //           // 在顶部显示数据
  //           itemStyle: {
  //             normal: {
  //               label: {
  //                 show: true,
  //                 position: "top",
  //                 formatter: "{c}"
  //               }
  //             }
  //           }
  //         }
  //       ]
  //     });
  //     // 大小自适应窗口大小变化
  //     window.onresize = function () {
  //       // 重置容器高宽
  //       chart.resize();
  //     };
  //   }
  //
  //   return {
  //     initChart
  //   };
  // }
};
</script>

<style scoped>

</style>